<template>
  <view class="container">
    
    <view class="form">
      
      <!-- 类型选择 -->
      <view class="form-item">
        <view class="label">类型<text class="required">*</text></view>
        <view class="type-selector">
          <view 
            class="type-item" 
            :class="{ active: form.type === 0, expense: form.type === 0 }"
            @click="form.type = 0"
          >
            支出
          </view>
          <view 
            class="type-item" 
            :class="{ active: form.type === 1, income: form.type === 1 }"
            @click="form.type = 1"
          >
            收入
          </view>
        </view>
      </view>
      
      <!-- 金额 -->
      <view class="form-item">
        <view class="label">金额<text class="required">*</text></view>
        <input 
          class="input amount-input" 
          type="digit" 
          placeholder="请输入金额"
          v-model="form.amount"
        />
      </view>
      
      <!-- 分类 -->
      <view class="form-item">
        <view class="label">分类<text class="required">*</text></view>
        <picker 
          mode="selector" 
          :range="form.type === 0 ? expenseCategories : incomeCategories" 
          @change="onCategoryChange"
        >
          <view class="picker">{{ form.category || '请选择分类' }}</view>
        </picker>
      </view>
      
      <!-- 日期 -->
      <view class="form-item">
        <view class="label">日期<text class="required">*</text></view>
        <picker 
          mode="date" 
          :value="form.recordDate"
          @change="onDateChange"
        >
          <view class="picker">{{ form.recordDate || '请选择日期' }}</view>
        </picker>
      </view>
      
      <!-- 备注 -->
      <view class="form-item">
        <view class="label">备注</view>
        <textarea 
          class="textarea" 
          placeholder="请输入备注信息"
          v-model="form.remark"
          maxlength="200"
        />
      </view>
      
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-area">
      <button class="submit-btn" @click="handleSubmit">保存</button>
    </view>
    
  </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
  data() {
    return {
      form: {
        type: 0,
        amount: '',
        category: '',
        recordDate: '',
        remark: ''
      },
      expenseCategories: ['餐饮', '交通', '购物', '娱乐', '医疗', '其他'],
      incomeCategories: ['工资', '奖金', '兼职', '红包', '其他']
    };
  },
  
  onLoad() {
    // 设置默认日期为今天
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    this.form.recordDate = `${year}-${month}-${day}`;
  },
  
  methods: {
    onCategoryChange(e) {
      const categories = this.form.type === 0 ? this.expenseCategories : this.incomeCategories;
      this.form.category = categories[e.detail.value];
    },
    
    onDateChange(e) {
      this.form.recordDate = e.detail.value;
    },
    
    validateForm() {
      if (!this.form.amount) {
        uni.showToast({ title: '请输入金额', icon: 'none' });
        return false;
      }
      if (parseFloat(this.form.amount) <= 0) {
        uni.showToast({ title: '金额必须大于0', icon: 'none' });
        return false;
      }
      if (!this.form.category) {
        uni.showToast({ title: '请选择分类', icon: 'none' });
        return false;
      }
      if (!this.form.recordDate) {
        uni.showToast({ title: '请选择日期', icon: 'none' });
        return false;
      }
      return true;
    },
    
    async handleSubmit() {
      if (!this.validateForm()) {
        return;
      }
      
      try {
        uni.showLoading({ title: '保存中...' });
        await api.addRecord(this.form);
        uni.hideLoading();
        
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        });
        
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
        
      } catch (error) {
        console.error('保存失败：', error);
        uni.hideLoading();
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.form {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.required {
  color: #e64340;
  margin-left: 5rpx;
}

.type-selector {
  display: flex;
  gap: 20rpx;
}

.type-item {
  flex: 1;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

.type-item.active.expense {
  background-color: #e64340;
  color: #fff;
}

.type-item.active.income {
  background-color: #1aad19;
  color: #fff;
}

.input {
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.amount-input {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
}

.textarea {
  width: 100%;
  height: 150rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.submit-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1aad19;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  line-height: 90rpx;
  text-align: center;
}
</style>



